<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			1,元素选择器， 例如 p
			2，类名选择器    .
			3，id名选择器   #
			4，关系选择器    
			      a，子孙 选择器  空格
			      b，子选择器       >
			      c，兄弟选择器  ~
			      d，相邻选择器 +
			5，组选择器 ，
			6，通配选择器 *
			7，伪类选择器  ：
			8，伪对象   ::
			9，属性选择器
			-->
			<style type="text/css">
				.web .test1{
					margin: 0 auto;
					margin-top:20px;
					width: 100px;
					height: 100px;
					background: skyblue;
					transition: all .5s;		
					}
				.test1:hover{
					transform: translate(-13px) scale(1.2)/*rotate(1000deg)*/;
					box-shadow: 5px 5px 20px red;
					background: hotpink;
				}
				.web ul li{
					list-style-position: inside;
				}
				.web > ul li{
					/*list-style-position: inside;*/
					height: 30px;
					line-height: 30px;
					list-style: disc;
				}
				/*
				 伪类选择器  
				    E：  hover  选中鼠标悬停在该元素时的状态
				    E： fish-child  选中第一个元素  （注意：必须同时满足第一个和E选择器 ）
				    E： nth-child（） 选中第n个孩子
				    E: nth-of-type()
				    
				    E:not(x)所有E选择器里面排除x选择器
				 * */
				
				.web > ul li:first-child{     /*first-child   第一个  li*/
					color: red;
				}
				.web > ul li:nth-child(2){     /*nth-child(2)  选择ul中 第几个li*/
					color: blue;
				}
				.web > ul li:last-child{
					color: hotpink;
				}
				.web > ul li:nth-child(2n){
					background: firebrick;
				}
				.web > ul li:nth-child(2n-1){
					background: darkgray;
				}
				.web ul div:first-of-type{
					font-style: italic;
				}
				.web ul div:last-of-type{
					font-weight:bold;
				}
				.web ul div:nth-of-type(2){
					text-decoration: underline;
					}
				.web > ul li:not(:nth-child(3
				
				)){
					font-size: 30px;
				}
			</style>
			<div class="web">
				<div class="test1"></div>
				<ul>
					<li>bgg神教</li>
					<li>一统江湖</li>
					<li>阿富无敌</li>
					<div>福福福福福</div>
					<li>练就一身本领</li>
					<li>身高83</li>
					<li>尺寸180</li>
					<li>冲凉加洗澡</li>
					<div>福福福福福</div>
				</ul>
				<style type="text/css">
					.perinfo{
						width: 300px;
						height: 300px;
						overflow: hidden;
						background: skyblue;
						margin: 0 auto;
						position: relative;
					}
					/* .perinfo input[type="checkbox"] 选择input框的选择类名
					 checked + span 当点击input框后的效果*/
					.perinfo input[type="checkbox"]:checked + span{
						color: red;
                        font-size: 30px;
					}
					.perinfo input[type="checkbox"]:checked ~ div{
						left: -100px;
					}
					.perinfo div{
						width: 100px;
						height: 100px;
						background: red;
						transition: all 1s;   /*transition: all 1s; 动画的效果*/
						position: absolute;
						bottom: 0;
						left: 0;
					}
					.perinfo input[type="checkbox"]{
						display: block;      /*display: block; 使之不可见不占位置大小  */
						/*visibility: hidden;    /*visibility: hidden;   使不可见，但还是占据位置大小*/
						width: 0;
						height: 0;*/
					}
				</style>
				<div class="perinfo">
					<p>阿富的</p>
					<input id="fav" type="checkbox"  />
					<label for="fav">男</label>
					<div></div>
				</div>
				<style type="text/css">
					.after{
						width: 300px;
						height: 200px;
						background: skyblue;
						margin: 0 auto;
						margin-top: 50px;
					}
					.after::after{
						content: "是真的吗？ 不信";
					}
					.after::before{
						content: "大家都这么说";
					}
					/*.test2 li{
						float: left;
						line-height: 30px;
					}
					.test2 li:nth-child*/
				</style>
				<!--
					伪对象选择器
					E： after 在e内部的最后追加内容
					E： before 在e内部的最前面插入内容
				-->
				<div class="after">
					<span>你真帅</span>
				</div>
				<div class="clear">
					<ul class="test2 clear">
						<li>111</li>
						<li>111</li>
						<li>111</li>
						<li>111</li>
						<li>111</li>
					</ul>
				</div>
			</div>
			
	</body>
</html>
